<template>
	<view class="page flex flex-col">
		<navbar :leftText="'收益记录'" :backStatus="true"></navbar>
		<!-- style="overflow-y: hidden;" -->
		<view class="flex-1">
			<view class="w690 shouHeader">
				<view class="flex-center">
					<view>
						<up-tabs :list="list1" @click="selectRecord" lineWidth="60" lineColor="#38FDFF" :activeStyle="{
						    color: '#38FDFF',
						    fontWeight: 'bold'
						}" :inactiveStyle="{
						    color: '#FFFFFF ',
						    transform: 'scale(1)'
						}" itemStyle="padding-left: 30px; padding-right: 30px; height: 50px;"></up-tabs>
						<view class="classify"></view>
					</view>
				</view>

				<!-- 收益曲线折线图 -->
				<!-- <view class="shouYi w690">
					<view class="flex-column">
						<text>曲线折线图</text>
						<image style="width:124rpx;height:10rpx;margin-top:10rpx;margin-bottom: 30rpx;"
							:src="imageUrl + '/home/huaxian@2x.png'" mode="aspectFill">
						</image>
					</view>
					<view>
						<shouYi></shouYi>
					</view>

				</view> -->


				<view class="flex-column w690 text-white" style="padding-top:20rpx;box-sizing: border-box;">
					<text>收益明细</text>
					<image style="width:124rpx;height:10rpx;margin-top:10rpx;margin-bottom: 30rpx;"
						:src="imageUrl + '/home/huaxian@2x.png'" mode="aspectFill">
					</image>
				</view>
				<view class="flex classifyMain w690">
					<view v-for="(item,index) in classifyAll" :key="index" @click="selectDevice(index)">
						<view class="flex-center" :class="index == currentIndex ? 'defaultClassify' : 'activeClassify'">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="shouYiHead showLine w690">
					<up-row>
						<up-col span="5">
							<view>设备编号</view>
						</up-col>
						<up-col span="3">
							<view class="text-center">收益时间</view>
						</up-col>
						<up-col span="4">
							<view class="text-center">收益金额</view>
						</up-col>
					</up-row>
				</view>
			</view>

			<!-- 收益明细 heightFull -->
			<view class="shouYi " id="ceshi">
				<view class="flex flex-col" style="overflow-y: hidden;background-color: #11102A;">
					<!-- {{indexList}} -->
					<scroll-view v-if="indexList.length>0" @scrolltolower="teamlower" class="scroll-view_H  w690"
						:style="{ height: scrollHeight }" scroll-y="true" @scroll="scroll">
						<up-row v-for="(item,index) in indexList" @click="goShouYiDetail(item)"
							customStyle="margin-bottom: 10px;height:100rpx;border-bottom:2rpx solid #1F1757">
							<up-col span="5">
								<view class="text-26 overflow-text">{{item.code}}</view>
							</up-col>
							<up-col span="3">
								<view class="text-26 text-center">{{timeFormat(item.createTime,'yyyy-mm-dd')}}</view>
							</up-col>
							<up-col span="4">
								<view class="text-26 text-center">{{item.income/10000}}</view>
							</up-col>
						</up-row>
					</scroll-view>
					<view class="flex-center" :style="{ height: scrollHeight }">
						<noData :width="250" :height="250"
							:imgUrl="'http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/kong.gif'"></noData>
					</view>
				</view>


			</view>

		</view>
	</view>
</template>

<script setup>
	import * as api from "@/utils/api.js"
	// import shouYi from "../../../components/chart/shouYi.vue"
	import {
		timeFormat
	} from 'uview-plus'
	import {
		ref,
		reactive,
		onMounted,
		inject
	} from 'vue';
	let imageUrl = ref("");

	// 滚动区域的高度
	const scrollHeight = ref();
	onMounted(() => {
		// 全局变量引入
		const globalData = inject('globalData');
		imageUrl.value = globalData.value.imgOssUrl;


		uni.getSystemInfo({
			success: function(res) {
				const query = wx.createSelectorQuery()
				query.select('#ceshi').boundingClientRect()
				// 获取滚动容器css数据
				query.exec((resData) => {
					if (resData && resData.length) {
						// 容器高度 = 可使用窗口高度 - 滚动容器距离顶部位置
						scrollHeight.value = res.windowHeight - resData[0].top + 'px'
					}
				})
			},
		})

		// 获取收益记录
		getShouRecord();
	})

	const deviceType = ref("all")
	const timeType = ref("all")

	// 设备类型下表
	const currentIndex = ref(0);

	const pageNumber = ref(1);

	const pageSize = ref(30);

	const indexListTotal = ref(0);

	// 获取收益记录
	const getShouRecord = () => {
		let e = {
			url: '/app-api/index/profit',
			data: {
				pageNo: pageNumber.value,
				pageSize: pageSize.value,
				deviceType: deviceType.value,
				timeType: timeType.value
			}
		};
		api.default.get(e).then((res) => {
			if (pageNumber.value == 1) {
				indexList.value = res.data.list;
			} else {
				indexList.value = indexList.value.concat(res.data.list);
			}
			// 收益列表总数
			indexListTotal.value = res.data.total
		})
	}

	// 上拉刷新
	const teamlower = () => {
		if (indexListTotal.value > indexList.value.length) {
			pageNumber.value++;

			// 调用设备列表
			getShouRecord()
		}

	}

	// 收益类型
	const shouYiType = ref(0);

	// 选择收益类型
	const selectRecord = (val) => {
		shouYiType.value = val.index;

		timeType.value = val.value;

		pageNumber.value = 1;
		indexList.value = [];
		deviceType.value = "all";
		currentIndex.value = 0;

		// 调用收益列表
		getShouRecord();
	}

	// 选择设备
	const selectDevice = (val) => {
		currentIndex.value = val;
		deviceType.value = classifyAll[val].value;
		pageNumber.value = 1;
		indexList.value = [];



		// 调用收益列表
		getShouRecord()
	}

	// 全部分类
	const classifyAll = reactive([{
			name: "全部",
			value: "all"
		},
		{
			name: "路由器",
			value: "router"
		}, {
			name: "大节点",
			value: "node"
		}, {
			name: "盒子",
			value: "smallbox"
		}
	])

	let indexList = ref([])
	// 收益分类
	const list1 = reactive([{
			name: '总收益',
			value: "all"
		},
		{
			name: '本月收益',
			value: "month"
		},
		{
			name: '昨日收益',
			value: "yesterday"
		}
	]);

	// 去收益详情
	let goShouYiDetail = (val) => {
		uni.navigateTo({
			url: "/pages/index/indexChild/shouYiDetail?code=" + val.code
		})
	}
</script>

<style scoped>
	.classifyMain {
		color: #fff;
	}

	.scroll-view_H {
		font-size: 28rpx;
		overflow: hidden;
		/* background-color: #e43; */
	}

	.classify {
		border-bottom: 2rpx solid #1F1757 !important;
		position: relative;
		top: -8rpx;
	}

	.page /deep/ .u-tabs__wrapper__nav__line {
		z-index: 99;
	}

	.shouYi {
		color: #fff;
		/* margin-top: 40rpx; */
	}

	.shouYiHead {
		font-size: 24rpx;
		color: #5A669E;
	}

	.showLine {
		height: 80rpx;
		line-height: 80rpx;
	}

	.defaultClassify {
		width: 134rpx;
		height: 48rpx;
		background: url("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/home/leibie-bg1%402x.png") no-repeat;
		background-size: 100% 100%;
		font-size: 26rpx;
	}

	.activeClassify {
		width: 134rpx;
		height: 48rpx;
		background: url("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/home/leibie-bg2@2x.png") no-repeat;
		background-size: 100% 100%;
		font-size: 26rpx;
	}
</style>